import { FundOutlined, PieChartOutlined, SettingOutlined, UnorderedListOutlined } from '@ant-design/icons';
import { Button, DatePicker, Tabs } from 'antd';
import locale from 'antd/lib/date-picker/locale/zh_CN';
import moment, { Moment } from 'moment';
import React from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { FilterDateSelector } from '../../redux/Global/selector';
import { ActionProps } from '../../redux/type';
import RecordList from './RecordList/RecordList';

const { TabPane } = Tabs;
const { RangePicker } = DatePicker;

export default function Panel()
{
    let filterDate = useSelector(FilterDateSelector);

    const dispatch = useDispatch();

    return (
        <div className='Panel'>
            <Tabs defaultActiveKey="1" tabBarExtraContent={
                <div style={{ display: "flex", gap: "10px" }}>
                    <RangePicker locale={locale}
                        onChange={async (v) =>
                        {
                            if (v)
                            {
                                dispatch<ActionProps<string, Moment[]>>({
                                    type: "GetBudgetListData",
                                    payload: v as Moment[],
                                });

                            } else
                            {
                                //Async Fetch Current Month BudgetList
                                dispatch<ActionProps<string, Moment[]>>({
                                    type: "GetBudgetListData",
                                    payload: [
                                        moment().startOf('month'),
                                        moment().endOf('month'),
                                    ],
                                });
                            }
                        }}
                    />
                    <Button icon={<SettingOutlined />} />
                </div>
            }>
                <TabPane
                    tab={
                        <span>
                            <FundOutlined />
                            资金流水
                        </span>
                    }
                    key="1"
                >
                    <RecordList />
                </TabPane>
                <TabPane
                    tab={
                        <span>
                            <UnorderedListOutlined />
                            预算列表
                        </span>
                    }
                    key="2"
                >
                    Tab 2
                </TabPane>

                <TabPane
                    tab={
                        <span>
                            <PieChartOutlined />
                            图表
                        </span>
                    }
                    key="3"
                >
                    Tab 3
                </TabPane>
            </Tabs>
        </div>
    );
}
